<template>
    <div id="project-info">
        <el-dialog
            :title="$t('key_42')"
            v-model="isShowDialog"
            :close-on-click-modal="false" 
            width="769px" 
            :before-close="handleClose"
            :destroy-on-close="true"
        >
            <el-table ref="multipleTableRef" @selection-change="handleSelectionChange" :data="useList" style="width: 100%">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="name" :label="$t('key_0')" align="center" />
                <el-table-column prop="code" :label="$t('key_2')" align="center" />
            </el-table>
            <template #footer>
                <el-button @click="cancelMenuClick">{{ $t('key_24') }}</el-button>
                <el-button type="primary" :disabled="repeatDis" @click="controlMenuClick">{{ $t('key_25') }}</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, computed , ref, reactive , toRefs , watch , toRef , toRaw , onMounted, Ref } from 'vue'
import { getRolePage , sysUserOwnRole , sysUserGrantRole } from '/@/api/manage/manage.ts'
/*** 定义接口基础数据类型 */
interface data {
    repeatDis ? : boolean
}
export default defineComponent( {
    name: 'project-info',
    components: {},
    props:{
        useId: {
            type: String,
            default: ''
        },
        isShowDialog: {
            type: Boolean,
            default: false
        }
    },
    setup(props,ctx){
        let useList = ref()
        const multipleTableRef = ref()
        const multipleSelection = ref()
        let getHaveArr: any[] = []

        /*** 引用接口定义基础数据初始值 */
        const state = reactive < data > ({
            repeatDis: false
        })

        const getRowKeys = (row: any) => {
            return row.id
        }

        /*** GetUseInfo 获取角色信息 */
        const GetUseInfo = async () => {
            await GetUseRole()
            let param = {
                pageNo: 1,
                pageSize: 999999,
            }
            try {
                let res: { data: any } = await getRolePage(param)
                useList.value = res.data.rows
                let tableArr = res.data.rows
                setTimeout(() => {
                    if(getHaveArr.length !== 0){
                        getHaveArr.forEach((item: any) => {
                            tableArr.map((i: any) => {
                                if(String(i.id) === String(item)){
                                    multipleTableRef.value!.toggleRowSelection(i, undefined)
                                }
                            })
                        })  
                    }
                })
            } catch (err) {}
        }

        const handleSelectionChange = (val: any) => {
            multipleSelection.value = val
        }

        /*** GetUseRole 获取用户已经拥有的角色 */
        const GetUseRole = async () => {
            try {
                let res: { data: any } = await sysUserOwnRole({ id: props.useId })
                getHaveArr = res.data
            } catch (err) {}
        }

        /*** watch 监听属性 */
        watch(() => props.isShowDialog,(newVal) => {
            if(newVal){
                state.repeatDis = false
                GetUseInfo()
            }
        })

        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            closeChose()
            ctx.emit('cancelMenuClick')
        }

        /** cancelMenuClick 取消按钮 */
        const cancelMenuClick = () => {
            closeChose()
            ctx.emit('cancelMenuClick')
        }

        /** controlMenuClick 确定按钮 */
        const controlMenuClick = async () => {
            console.log(props.useId,'useId')
            let setArr = toRaw(multipleSelection.value)
            let needArr:any[] = []
            setArr.map((i: any) => {
                needArr.push(String(toRaw(i).id))
            })
            let res = await sysUserGrantRole({ id: props.useId , grantRoleIdList: needArr })
            if (res.success) {
                state.repeatDis = true
                closeChose()
                ctx.emit('controlMenuClick')
                ctx.emit('updateData')
            }else{
                closeChose()
                ctx.emit('controlMenuClick')
            }
        }

        /*** dialogVisibled 响应弹窗的关闭  */
        const isShowDialog = computed(() => {
            return props.isShowDialog
        })

        /*** closeChose 取消默认选中 */
        const closeChose = () => {
            multipleTableRef.value!.clearSelection()
        }
        onMounted(() => {})
        return {
            cancelMenuClick,
            controlMenuClick,
            handleClose,
            controlClick: false, // 防止重复提交（false为可以点击，true为禁止点击）
            isShowDialog, // 关闭弹窗的时候需要单独将其导出，注意：放在reactive中无效
            ...toRefs(state),
            useList,
            handleSelectionChange,
            multipleTableRef,
            getRowKeys
        }
    },
} )
</script>
<style scoped lang="scss">
</style>